<template>
  <!-- 第一个card -->
  <div class="question">
    <el-card>
      <el-form :model="form">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select v-model="form.subject">
                <el-option
                  v-for="item in subjectArr"
                  :key="item.intro"
                  :label="item.intro"
                  :value="item.intro"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="阶段">
              <el-select v-model="form.step">
                <el-option
                  v-for="(val, key, index) in stepObj"
                  :key="index"
                  :value="key"
                  :label="val"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="企业">
              <el-select v-model="form.enterprise">
                <el-option
                  v-for="(val, index) in companyList"
                  :label="val.name"
                  :key="index"
                  :value="val.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="题型" v-model="form.item" prop="type">
              <el-select v-model="form.type">
                <el-option
                  v-for="(val, key, index) in typeObj"
                  :key="index"
                  :value="key"
                  :label="val"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="form.difficulty">
                <el-option
                  v-for="(value, key, index) in diffObj"
                  :key="index"
                  :label="value"
                  :value="+key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="form.status">
                <el-option
                  v-for="(value, key, index) in statusObj"
                  :value="key"
                  :key="index"
                  :label="value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="日期">
              <div class="block">
                <span class="demonstration"></span>
                <el-date-picker
                  v-model="form.create_date"
                  type="date"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="form.title"
                style="width: 90%"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="14">
            <el-button type="primary" class="search-btn" @click="search"
              >搜索</el-button
            >
            <!-- 清除
            el-form   model ref
               el-form-item   prop绑定
               this.$refs.ref值.resetFields()

             -->
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="isShow = true">
              新增试题</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 第二个card -->
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="序号" width="180" type="index">
        </el-table-column>
        <el-table-column prop="title" label="题目" width="180">
        </el-table-column>

        <el-table-column prop="subject_name" label="学科.阶段">
        </el-table-column>
        <el-table-column prop="type" label="题型"> </el-table-column>
        <el-table-column prop="enterprise_name" label="企业"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="status" label="状态" v-slot="{ $index }">
          {{ tableData[$index].status | transferStatus }}
        </el-table-column>
        <el-table-column prop="reads" label="访问量"> </el-table-column>
        <el-table-column label="操作" v-slot="{ row, $index }">
          <span>
            <span class="but" @click="edit(row)">编辑</span>
            <span
              class="but"
              v-if="tableData[$index].status == 1"
              @click="toggleStatus(row.id)"
              >禁用</span
            >
            <span class="but" v-else @click="toggleStatus(row.id)">启用</span>
            <span class="but">删除</span>
          </span>
        </el-table-column>
      </el-table>
      <div class="block" style="text-aligin: center">
        <el-pagination
          @size-change="changeSize"
          @current-change="changCurrent"
          :current-page="1"
          :page-sizes="[1, 5, 10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        >
        </el-pagination>
      </div>
    </el-card>
    <Add
      :dialogVisible.sync="isShow"
      ref="add"
      :mode="mode"
      :stepObj="stepObj"
      :companyList="companyList"
      :subjectArr="subjectArr"
      :typeObj="typeObj"
      :diffObj="diffObj"
    ></Add>
    <!-- 城市待写 -->
  </div>
</template>

<script>
import Add from './components/add.vue'

import {
  questionList,
  enterpriseList,
  subjectList,
  questionStatus
} from '@/api/question.js'

export default {
  data () {
    return {
      form: {
        title: '', // 否	string	标题名称
        subject: '', // 否	int	学科id
        enterprise: '', // 否	int	企业id
        type: '', // 否	int	题目类型:(单选),2(多选),3(简答)
        step: '', // 否	string	题目阶段:(初级),2(中级),3(高级)
        username: '', // 否	string	作者
        status: '', // 否	int	状态:0(禁用),(启用)
        difficulty: '', // 否	int	题目难度: (简单),2(一般),3(困难)
        create_date: '' // 否	string	创建日期
      },

      isShow: false,
      stepObj: {
        1: '初级',
        2: '中级',
        3: '高级'
      },
      typeObj: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      diffObj: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      statusObj: {
        0: '禁用',
        1: '启用'
      },
      companyList: [],
      tableData: [],
      subjectArr: [],
      pageTotal: 0,
      page: 1,
      isOpen: false,
      mode: 'add'
    }
  },
  methods: {
    changeSize () {},
    changCurrent () {},
    async getData () {
      const res = await questionList(this.form)
      const res2 = await enterpriseList()
      const res3 = await subjectList()
      console.log('datalist数据', res)
      res.data.items.forEach((item) => {
        item.city = item.city.split(',')
        item.title = item.title.split('<p>')[1].split('</p>')[0]
      })
      this.tableData = res.data.items
      this.pageTotal = res.data.pagination.total
      this.page = res.data.pagination.page
      console.log(res2)
      this.companyList = res2.data.items
      this.subjectArr = res3.data.items

      console.log('xueke', this.subjectArr)

      console.log(this.companyList)
    },
    // 禁用或启动状态
    toggleStatus (id) {
      const res = questionStatus({ id: id }).then(() => {
        this.$message.success('修改状态成功')
        this.getData()
      })

      console.log(res)
    },
    // 搜索
    search () {
      this.getData()
    },
    // 清除全部
    clear () {
      this.form = {
        title: '', // 否	string	标题名称
        subject: '', // 否	int	学科id
        enterprise: '', // 否	int	企业id
        type: '', // 否	int	题目类型:(单选),2(多选),3(简答)
        step: '', // 否	string	题目阶段:(初级),2(中级),3(高级)
        username: '', // 否	string	作者
        status: '', // 否	int	状态:0(禁用),(启用)
        difficulty: '', // 否	int	题目难度: (简单),2(一般),3(困难)
        create_date: '' // 否	string	创建日期
      }
    },
    // 点击编辑,传数据给dialog
    edit (data) {
      this.isShow = true
      this.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(data))
    }
  },
  components: {
    Add
  },
  filters: {
    transferStatus: (status) => {
      const statusObj = {
        0: '禁用',
        1: '启用'
      }
      return statusObj[status]
    }
  },

  created () {
    this.getData()
  }
}
</script>

<style lang="less" scoped>
.el-pagination {
  text-align: center;
}
.but {
  padding: 0 5px;
  color: #40aaff;
  cursor: pointer;
}
</style>
